<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <meta content="utf-8" http-equiv="encoding"/>

    <!-- Loading / Progress Bar -->
    <link rel="preload" href="img/spinner.svg" as="image"/>

    <!--
        Bose AR SDK supplied from https://github.com/zakaton/Bose-Frames-Web-SDK
        Please visit the github link above for the most recently maintained minified js
        -->
    <script src="js/bose-ar-web-sdk.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.7.0/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@2.7.0/dist/tf-backend-wasm.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh@0.0.5/dist/facemesh.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    <script src="js/three.js/libs/stats.min.js"></script>
    <script src="js/three.js/loaders/GLTFLoader.js"></script>
    <script src="js/three.js/postprocessing/EffectComposer.js"></script>
    <script src="js/three.js/postprocessing/RenderPass.js"></script>
    <script src="js/three.js/postprocessing/ShaderPass.js"></script>
    <script src="js/three.js/shaders/CopyShader.js"></script>

    <script src="js/osc.min.js"></script>
    <script src="js/1euro.js"></script>
    <script src="js/Gimbal.js"></script>
    <!-- <script src="js/triangle.js"></script> -->
    <script src="js/triangle.js"></script>

    <script src="js/Mach1SoundPlayer.js"></script>
    <script src="js/Mach1Decode.js"></script>

    <!-- start of the new libs -->
    <link
            rel="stylesheet"
            type="text/css"
            href="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.css"
            crossorigin="anonymous"/>
    <script
            src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js"
            crossorigin="anonymous"
    ></script>
    <script
            src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils@0.6/control_utils.js"
            crossorigin="anonymous"
    ></script>
    <script
            src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.3/drawing_utils.js"
            crossorigin="anonymous"
    ></script>
    <script
            src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@0.4/face_mesh.js"
            crossorigin="anonymous"
    ></script>
    <script
            src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils@0.1/drawing_utils.js"
            crossorigin="anonymous"
    ></script>
    <script
            src="https://cdn.jsdelivr.net/npm/@mediapipe/holistic@0.1/holistic.js"
            crossorigin="anonymous"
    ></script>

    <!-- end of the new libs -->
    <link rel="stylesheet" href="resources/style.css">
    <link rel="stylesheet" href="css/AudioPlayer.less">
</head>
<body>
<div id="main" style="display: none">
    <div
            class="containerOuter"
            style="position: absolute; top: 20px; left: 30px"
    >
        <div class="containerInner" id="selected_id" style="min-height: 190px">
            <input
                    type="radio"
                    name="mode"
                    id="radio3"
                    class="hidden"
                    value="touch"
                    onclick="selectTracker()"
            />
            <label class="entry" for="radio3"
            >
                <div class="circle"></div>
                <div class="entry-label">Touch</div>
            </label
            >

            <input
                    type="radio"
                    name="mode"
                    id="radio2"
                    class="hidden"
                    value="device"
                    onclick="selectTracker()"
            />
            <label class="entry" for="radio2"
            >
                <div class="circle"></div>
                <div class="entry-label">Device</div>
            </label
            >

            <input
                    type="radio"
                    name="mode"
                    id="radio1"
                    class="hidden"
                    checked="checked"
                    value="facetracker"
                    onclick="selectTracker()"
            />
            <label class="entry" for="radio1"
            >
                <div class="circle"></div>
                <div class="entry-label">Facetracker</div>
            </label
            >

            <input
                    type="radio"
                    name="mode"
                    id="radio4"
                    class="hidden"
                    value="bosear"
                    onclick="selectTracker()"
            />
            <label class="entry" for="radio4"
            >
                <div class="circle"></div>
                <div class="entry-label" style="margin-top: -3px">
                    BoseAR&nbsp;<bose-ar-device></bose-ar-device>
                </div
                >
            </label>

            <div class="highlight"></div>
            <div class="overlay"></div>
        </div>
    </div>
    <svg width="0" height="0" viewBox="0 0 40 190">
        <defs>
            <mask id="holes">
                <rect x="0" y="0" width="100" height="140" fill="white"/>
                <circle r="12" cx="20" cy="20" fill="black"/>
                <circle r="12" cx="20" cy="70" fill="black"/>
                <circle r="12" cx="20" cy="120" fill="black"/>
                <circle r="12" cx="20" cy="170" fill="black"/>
            </mask>
        </defs>
    </svg>
    <div
            class="containerOuter"
            style="position: absolute; top: 20px; left: 20px"
    >
        <div class="containerInner">
            <button onclick="Player.play()" class="button">Play</button>
            <button onclick="Player.stop()" class="button">Stop</button>
            <button onclick="DisplayDebug()" class="button">Debug</button>
        </div>
    </div>
    <div
            id="bosearstats"
            class="containerOuter"
            style="display: none; position: absolute; top: 20px; left: 450px"
    >
        <div class="containerInner">
            <form id="Rotation">
                <h3>Rotation</h3>
                <select id="boseRate" size="5" oninput="enableBoseAR()">
                    <option selected value="0">disabled</option>
                    <option value="20">very fast (20ms)</option>
                    <option value="40">fast (40ms)</option>
                    <option value="80">normal (80ms)</option>
                    <option value="160">slow (160ms)</option>
                </select>
                <br/>
                <br/>
                <label for="rotationYaw">yaw&nbsp;&nbsp;</label>
                <input id="rotationYaw" readonly size="2"/><br/>
                <label for="rotationPitch">pitch</label>
                <input id="rotationPitch" readonly size="2"/><br/>
                <label for="rotationRoll">roll&nbsp;</label>
                <input id="rotationRoll" readonly size="2"/>
            </form>
        </div>
    </div>
    <div
            id="touchstats"
            style="
          display: none;
          margin: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 50vw;
          height: auto;
        "
    >
        <div class="background">
            <img src="img/touch-compass.svg" style="width: 50vw; height: auto"/>
        </div>
        <div class="cardBottom">
            <div class="card">
                <div class="txt">FRONT</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div id="compassContainer">
            <img id="compass" src="img/nav-compass.svg"/>
        </div>
        <div id="warning"></div>
    </div>
    <div
            class="container"
            style="position: absolute; bottom: 5px; right: 5px"
    >
        <div class="canvas-wrapper">
            <canvas id="output" style="display: none" width="500" height="450"></canvas>
            <video
                    id="video"
                    playsinline
                    style="
              -webkit-transform: scaleX(-1);
              transform: scaleX(-1);
              visibility: hidden;
              width: auto;
              height: auto;
              position: absolute;
              bottom: 5px;
              right: 5px;
            "
            ></video>

        </div>
    </div>
    <div class="container">
        <div id="modelview" class="canvas-wrapper" style="display: none"></div>
    </div>
</div>

<div id="stats" style="position: absolute; bottom: 5px; left: 5px"></div>
<div
        id="info"
        style="
        position: relative;
        margin: auto;
        margin-top: 41vh;
        text-align: center;
        font-size: 3em;
      "
></div>

<script src="js/M1SpatialAudioPlayer.js"></script>
</body>
</html>
